<template>
  <el-dialog
    :title="title"
    v-model:visible="shows"
    :width="width"
    :close-on-click-modal="closeOnClickModal"
    :before-close="handleClose"
    :append-to-body="appendToBody"
    :class="className"
  >
    <slot />
    <div v-if="btList" slot="footer" class="dialog-footer">
      <template v-for="(item, index) in getConfigList()">
        <el-button
          v-if="item.show"
          :key="index"
          :type="item.type"
          :icon="item.icon"
          :disabled="item.disabled"
          :loading="btLoading"
          @click="item.event"
          >{{ item.label }}</el-button
        >
      </template>
    </div>
  </el-dialog>
</template>

<script setup name="DialogForm">
const emits = defineEmits()
const props = defineProps({
  // 自定义类名
  className: {
    type: String,
  },
  // 弹窗标题
  title: {
    type: String,
  },
  // 弹窗是否显示
  visible: {
    type: Boolean,
    default: false,
  },
  // 弹窗宽度
  width: {
    type: String,
    default: '60%',
  },
  // 按钮加载
  btLoading: {
    type: Boolean,
    default: false,
  },
  // 操作栏配置
  btList: {
    type: Array,
  },
  // 插入到body
  appendToBody: {
    type: Boolean,
    default: true,
  },
  closeOnClickModal: {
    type: Boolean,
    default: false,
  },
})

const shows = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val) // 更新父组件shows
  },
})

// 获取按钮列表
function getConfigList() {
  return props.btList.filter(
    (item) =>
      !item.hasOwnProperty('show') || (item.hasOwnProperty('show') && item.show)
  )
}
// // 绑定的相关事件
function handleClose(done) {
  shows.value = false
  emits('reset')
}
</script>

<style scoped>
.dialog-footer {
  float: right;
}
</style>
